<template>
  <el-main>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="房源类型">
        <el-select v-model="form.houseType" placeholder="楼盘类型" clearable="">
          <el-option v-bind:label="item.name" :value="item.code" v-for="item in houseTypeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房源编号">
        <el-input v-model="form.houseNumber" placeholder="格式：H001"></el-input>
      </el-form-item>
      <el-form-item label="所属楼盘">
        <el-select v-model="form.estateId" @change="estateInfo" placeholder="所属楼盘" clearable="">
          <el-option v-bind:label="item.estateName" :value="item.estateId" v-for="item in estateList"></el-option>
        </el-select>
        <div>
          周边商圈：<span v-for="item in businessDistrictList">{{item.name}}({{item.description}})</span><br>
          周边地铁：<span v-for="item in subwayLineList">{{item.name}}({{item.description}})</span>
        </div>

      </el-form-item>
      <el-form-item label="房源图片">
        <el-upload
            class="avatar-uploader"
            :headers="{token:token}"
            :action="baseUrl+'file/upload/'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="form.houseImg" :src="form.houseImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="配置设施">
        <el-checkbox-group v-model="facilityIdList" @change="facilityChange">
        <el-checkbox :label="item.facilityId" v-for="item in facilityList">{{item.facilityName}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="供暖方式">
        <el-select v-model="form.heatingMode" placeholder="供暖方式" clearable="">
          <el-option v-bind:label="item.name" :value="item.code" v-for="item in heatingModeList"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
		    <el-button @click="$router.back()">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
  </el-main>
</template>

<script>
export default {
  data(){
    return {
      token:localStorage.getItem("token"),
      baseUrl:this.axios.defaults.baseURL,
      estateList:[],
      facilityList :[],
      facilityIdList:[],
      form:{
        facilityIdList:[],
        houseImg:null,
        estateId:null
      },
      houseTypeList:[
        {code:'jiZhShi', name: '集中式'},
        {code:'fenSanShi', name: '分散式'},
      ],
      heatingModeList:[
        {code:'zhyGn', name: '中央供暖'},
        {code:'ranQiGn', name: '燃气暖气'},
      ],
      businessDistrictList:[],
      subwayLineList:[]
    }
  },
  methods:{
    estateInfo(houseId) {
      this.axios.get("estate/getEstateInfo",{params:{id:houseId}}).then(res=>{
        this.businessDistrictList = res.data.data.businessDistrictList;
        this.subwayLineList = res.data.data.subwayLineList;
      })
    },
    save(){
      //ajax提交房源信息
      this.axios.post("house/save",this.form).then(res=>{
        if(res.data.code==200){
          //关闭对话框
          this.$message.success("保存成功")
          this.$router.back();
        }else {
          this.$message(res.data.msg);
        }
      })
    },
    handleAvatarSuccess(res,file){
      this.form.houseImg = res.data.fileUrl;
      console.log(this.form.houseImg);
    },
    facilityChange() {
      this.form.facilityIdList = this.facilityIdList;
    }
  },
  created(){
    let id = this.$route.query.id;
    this.axios.get('/house/update/init',{params:{id:id}}).then(res=>{
      this.facilityList = res.data.data.facilityList || [];
      this.estateList = res.data.data.estateList;
      if (res.data.data.house) {
        this.form = res.data.data.house;
        this.facilityIdList = res.data.data.facilityIdList;
        this.form.facilityIdList = res.data.data.facilityIdList;
      }
    })
  }
}
</script>

<style scoped>

</style>
